import React, { Component, useEffect, useState, useRef } from 'react';
import * as echarts from 'echarts';
import { connect } from 'dva';
import Title from '../Title';
const KipNumber = props => {
  const kpiRef = useRef();
  const { type } = props;
  const kpiCount = props[type];
  useEffect(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(kpiRef.current);

    // 指定图表的配置项和数据
    var option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
      },
      legend: {
        data: ['已完成', '未完成'],
      },
      xAxis: {
        type: 'value',
      },
      yAxis: { type: 'category', data: ['建设项目', '购买类项目'] },
      series: [
        {
          name: '已完成',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series',
          },
          data: [kpiCount.buildCompleteCount, kpiCount.serviceCompleteCount],
        },
        {
          name: '未完成',
          type: 'bar',
          stack: 'total',
          label: {
            show: true,
          },
          emphasis: {
            focus: 'series',
          },
          data: [
            kpiCount.buildCount - kpiCount.buildCompleteCount,
            kpiCount.serviceCount - kpiCount.serviceCompleteCount,
          ],
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }, []);

  return (
    <div>
      <Title
        title={
          type == 'kpiCount'
            ? '年度项目数量KPI完成情况'
            : '年度项目投资KPI完成情况'
        }
      ></Title>
      <div ref={kpiRef} style={{ height: 300 }}></div>
    </div>
  );
};
export default connect(state => state.home)(KipNumber);
